<template>
    <div class="campusPay">
        <img src="/static/h5/app-detail.jpg" style="width: 100%" alt="" />
        <div class="pt20 pl20 pr20">
            <div class="flex-row-sb-c">
                <span class="pay-title">{{ details.itemName || '' }}</span>
                <span class="price">
                    ￥
                    <span>19</span>
                    /月
                </span>
            </div>
            <!--            <p class="warn">19元/月*24个月</p>-->
            <span class="item-html" v-html="details.itemHtml"></span>
        </div>

        <div class="form_submit pl10 pr10">
            <van-form>
                <van-field center required size="large" v-model="form.payPhone" label="绑定手机" placeholder="请输入手机号">
                    <template #button>
                        <sc-button height="25px" width="100px" font-size="12px" @click="getStudentList">获取学生信息</sc-button>
                    </template>
                </van-field>

                <van-field required center size="large" v-model="form.schoolName" label="所在学校" placeholder="待获取所在学校" />
                <van-field required center size="large" v-model="form.levelName" label="所在班级" placeholder="待获取所在班级" />
                <van-field required center size="large" v-model="form.studentName" label="学生姓名" placeholder="待获取学生姓名" />
                <van-field center size="large" v-model="form.remark" label="备 注" placeholder="50字以内" maxlength="50" />
            </van-form>
        </div>

        <div class="fixed-btn" v-show="!isFous">
            <sc-button @click="onSubmit" style="width: 80%; height: 65px">
                去支付 ￥{{ details.amount > 0 ? details.amount / 100 : details.amount }}
            </sc-button>
        </div>

        <van-action-sheet
            @select="selectStudent"
            v-model="popup.selectStudent"
            :actions="actions"
            cancel-text="取消"
            description="请选择孩子"
            close-on-click-action
        ></van-action-sheet>

        <van-dialog
            v-model="popup.confirmDialog"
            :show-confirm-button="false"
            show-cancel-button
            cancel-button-text="不使用"
            :cancel-button-color="varCss.errColor"
            @cancel="noChilder"
        >
            <van-cell-group>
                <template #title>
                    <van-notice-bar wrapable :scrollable="false" text="系统检测到您的手机号绑定了孩子,若孩子信息无误,请点击 使用。" />
                </template>
                <van-cell v-for="item in actions" :key="item.id" :title="`学生姓名: ${item.name}`" :label="`${item.subname}`">
                    <template #right-icon>
                        <van-button type="info" size="small" @click="selectStudent(item)">使用</van-button>
                    </template>
                </van-cell>
            </van-cell-group>
        </van-dialog>
    </div>
</template>

<script>
let studentId = -999 //当前选中学生id
let openid = ''
export default {
    name: 'campusPay',
    data() {
        return {
            popup: {
                confirmDialog: false, //确认中间弹出
                selectStudent: false,
            },
            actions: [],
            studentList: [],
            form: {
                schoolName: '',
                levelName: '',
                studentName: '',
                payPhone: '',
                remark: '',
            },
            //支付对象
            payObj: {},

            details: {}, //支付详情
        }
    },
    created() {
        //本地不存在openid则请求
        // openid = this.$ls.get('openid') || ''
        // if (!openid) this.getOpenid() //获取openid
        this.getPayDetail() //支付详情
    },
    methods: {
        // 获取订单详情
        async getPayDetail() {
            const { code, data } = await this.$api.campusPay.getPayDetail({
                id: this.$route.params.id, //this.$utils.getUrlParams('id'),
            })
            if (code === 200) {
                this.details = data
            }
        },
        // 获取openid
        // async getOpenid() {
        //     const { code, data } = await this.$api.campusPay.getOpenid({
        //         code: this.$utils.getUrlParams('code'),
        //     })
        //     if (code === 200) {
        //         openid = data.openid
        //         this.$ls.set('openid', data.openid, 3600 * 24)
        //         return
        //     }
        //     this.$ls.remove('openid')
        // },
        async getStudentList() {
            if (!/^1[3456789]\d{9}$/.test(this.form.payPhone)) {
                this.$toast.fail('手机号格式不正确')
                return
            }
            const { code, data } = await this.$api.campusPay.getStudentList({ mobile: this.form.payPhone })
            if (code === 200) {
                if (data && !data.length) {
                    this.$toast({
                        type: 'fail',
                        message: '该手机暂未绑定孩子,请手动填写孩子信息',
                        duration: 2000,
                    })
                    return
                }
                this.studentList = data
                this.actions = data.map((v) => {
                    return {
                        ...v,
                        name: v.studentName,
                        subname: `${v.schoolName} ${v.levelName}`,
                    }
                })
                this.popup.selectStudent = true
            }
        },
        //弹窗不使用孩子
        async noChilder() {
            console.log('1', 1)
            //重定向支付
            window.location.href = await this.getPlaceOrder()
        },
        //选择孩子触发
        selectStudent(item) {
            this.form.levelName = item.levelName
            this.form.schoolName = item.schoolName
            this.form.studentName = item.studentName
            this.form.levelId = item.levelId

            studentId = item.studentId
            this.popup.confirmDialog = false
        },
        //获取订单信息
        async getPlaceOrder() {
            const { data } = await this.$api.campusPay.placeOrder({
                campusAppId: this.details.campusAppId,
                itemId: this.details.id,
                orderName: '',
                remark: this.form.remark, //备注
                subOpenId: openid,
                packageType: this.details.packageType,
                studentId: studentId,
                studentName: this.form.studentName,
                levelId: this.form.levelId,
                levelName: this.form.levelName,
                payPhone: this.form.payPhone,
            })
            return data
        },
        //下单
        async onSubmit() {
            // 设置滚动行为改为平滑的滚动
            window.scrollTo({
                top: document.querySelector('.pay-title').offsetTop,
                behavior: 'smooth',
            })

            if (!/^1[3456789]\d{9}$/.test(this.form.payPhone)) {
                this.$toast.fail('手机号格式不正确')
                return
            }

            if (!this.form.schoolName) {
                this.$toast.fail('所属学校不能为空')
                return
            }
            if (!this.form.levelName) {
                this.$toast.fail('班级不能为空')
                return
            }
            if (!this.form.studentName) {
                this.$toast.fail('学生姓名不能为空')
                return
            }

            if (studentId === -999) {
                // 弹出提示
                const { data } = await this.$api.campusPay.getStudentList({ mobile: this.form.payPhone })
                if (data.length > 0) {
                    this.studentList = data
                    this.actions = data.map((v) => {
                        return {
                            ...v,
                            name: v.studentName,
                            subname: `${v.schoolName} ${v.levelName}`,
                        }
                    })
                    this.popup.confirmDialog = true
                    return
                }
            }

            // // 强制获取电话孩子信息
            // const res = await this.$api.campusPay.getStudentList({ mobile: this.form.payPhone })
            // //如股只有一个孩子
            // if (res.data.length === 1) {
            //     this.form.levelName = res.data[0].levelName
            //     this.form.schoolName = res.data[0].schoolName
            //     this.form.studentName = res.data[0].studentName
            //     this.form.levelId = res.data[0].levelId
            //     studentId = res.data[0].studentId
            // }
            //重定向支付
            window.location.href = await this.getPlaceOrder()
            // this.$refs.form.validate().then(async () => {
            // 支付
            // WeixinJSBridge.invoke(
            //     'getBrandWCPayRequest',
            //     {
            //         ...data,
            //         appId: 'wxad812a959031f4b1', //公众号名称，由商户传入
            //         // "timeStamp": from.timestamp, //时间戳，自1970年以来的秒数
            //         // "nonceStr": from.noncestr, //随机串
            //         // "package": from.package,
            //         // "signType": "MD5", //微信签名方式：
            //         // "paySign": from.sign //微信签名
            //     },
            //     (res) => {
            //         console.log('WeixinJSBridge-res', res)
            //         if (res.err_msg == 'get_brand_wcpay_request:ok') {
            //             // 使用以上方式判断前端返回,微信团队郑重提示：
            //             //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            //             this.$toast.success('支付成功!')
            //         }
            //     }
            // )
            // })
        },
    },
}
</script>

<style lang="scss" scoped>
.campusPay {
    position: relative;
    min-height: 100vh;
    padding: 0 0 120px;
    box-sizing: border-box;
    margin: 0;

    .pay-title {
        font-size: 22px;
        font-weight: bold;
    }

    .item-html {
        //line-height: 22px;
    }

    .warn {
        color: $errColor;
        line-height: 30px;
        font-size: 15px;
    }
}

.banner_img {
    width: 100%;
    height: 100%;
}

.price {
    color: #f3705a;
    font-size: 18px;

    span {
        font-size: 24px;
    }
}
</style>

<style lang="scss">
.el-descriptions__title {
    font-size: 24px;
    color: #333333;
}

.el-descriptions--small .el-descriptions__header .el-descriptions__title {
    font-size: 16px;
}

.el-descriptions-item__label {
    display: none !important;
}

.el-input.is-disabled .el-input__inner {
    background: #fff;
    color: #333333;
}

.el-descriptions__label {
    display: none;
}

.el-form-item .el-form-item__label {
    font-size: 16px;
    color: #333333;
    min-width: 80px;
    text-align: right;
}

.el-input__inner {
    color: #cccccc;
    font-size: 16px;
    text-align: right;
    border: none;
}

.el-form--inline .el-form-item {
    height: 50px;
    margin-bottom: 0;
    width: 100%;
    position: relative;
    border-bottom: 1px solid #f8f6f6;
    position: relative;
}

/* 轮播图样式 */
.el-carousel__container {
    position: relative;
    height: 160px;
}

/* 表单报错信息位置 */
.el-form-item__error {
    top: 65%;
    left: -26%;
}

.el-form-item--small .el-form-item__label {
    line-height: 47px;
    height: 47px;
}

.el-input--small .el-input__inner {
    height: 47px;
    line-height: 20px;
}

.el-input__inner:focus {
    background: #fff;
    border: none;
}

/* select 下拉箭头不对齐 在el-form-item */
.el-input__suffix {
    top: 0.5714rem;
}

/* loading自定义样式 */
.create-isLoading .el-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0);
    padding: 1rem;
    border-radius: 0.2rem;
    width: auto;
    min-width: 10rem;
    text-align: center;
}

.create-isLoading .el-loading-spinner i {
    color: rgba(255, 255, 255, 0.5);
}

.create-isLoading .el-loading-spinner .el-loading-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}
</style>
